<template>
  <div>
    <div class="toptip tips" style=" box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);">
      <div class="item">
        <el-image style="width: 32px;height: 30px;margin-right: 10px" :src="u1"/>
        <span>总数</span>
        <span>{{ totalUsers }}</span>
      </div>
      <div class="item">
        <el-image style="width: 32px;height: 30px;margin-right: 10px" :src="u2"/>
        <span>在线</span>
        <span>{{ onlineUsers }}</span>
      </div>
      <div class="item">
        <el-image style="width: 32px;height: 30px;margin-right: 10px" :src="u3"/>
        <span>停留</span>
        <span>0</span>
      </div>
      <div class="item">
        <el-image style="width: 32px;height: 30px;margin-right: 10px" :src="u4"/>
        <span>上报</span>
        <span>0</span>
      </div>
      <div class="item">
        <el-image style="width: 32px;height: 30px;margin-right: 10px" :src="u5"/>
        <span>考勤</span>
        <span>0</span>
      </div>
      <div class="item">
        <el-image style="width: 32px;height: 30px;margin-right: 10px" :src="u6"/>
        <span>警告</span>
        <span>0</span>
      </div>
    </div>
    <div class="bottomtip tips" style="right: 45px;bottom: 12px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);">
      <div class="item" @click="msgDiv=!msgDiv">
        <i class="el-icon-s-comment"/>
        <span>即时消息</span>
      </div>
      <div class="item" @click="eventDiv=!eventDiv">
        <i class="el-icon-document"/>
        <span>事件上报</span>
      </div>
      <div class="item" @click="fenceDiv=!fenceDiv">
        <i class="el-icon-full-screen"/>
        <span>围栏告警</span>
      </div>
    </div>
    <!--    <div class="rightbtm tips">-->
    <!--      <div class="item">-->
    <!--        <i class="el-icon-setting"/>-->
    <!--        <span>系统配置</span>-->
    <!--      </div>-->
    <!--      <div class="item">-->
    <!--        <i class="el-icon-s-cooperation"/>-->
    <!--        <span>业务配置</span>-->
    <!--      </div>-->
    <!--      <div class="item">-->
    <!--        <i class="el-icon-map-location"/>-->
    <!--        <span>地图调度</span>-->
    <!--      </div>-->
    <!--      <div class="item">-->
    <!--        <i class="el-icon-data-line"/>-->
    <!--        <span>统计分析</span>-->
    <!--      </div>-->
    <!--    </div>-->

    <!--即时通信-->
<!--    <msgPage v-if="msgDiv" @close="msgDiv=false"/>-->
    <getMsgPage v-if="msgDiv" @close="msgDiv=false"/>
    <border title="事件上报" v-if="eventDiv" :close="true" @close="eventDiv=false" w="310px" h="680px"
            x="83%" y="120px">
      <events/>
    </border>

    <border title="围栏告警" v-if="fenceDiv" :close="true" @close="fenceDiv=false" w="800px" h="600px"
            style="left: 30%;top: 20%;">
      <fence/>
    </border>
  </div>
</template>
<script>
import msgList from './models/msgList.vue'
import border from '../border/index.vue'
import collaboration from "@/views/formShortLink/pageModel/models/collaboration.vue";
import events from './models/events.vue'
import fence from './models/fence.vue'
// import msgPage from "@/views/formShortLink/pageModel/models/msgPage.vue";
import getMsgPage from "@/views/formShortLink/pageModel/models/getMsgPage.vue";
import { groupsPersons } from '@/api/message';


export default {
  components: {getMsgPage, collaboration, border, msgList, events, fence},
  data() {
    return {
      msgDiv: false,
      eventDiv: false,
      fenceDiv: false,
      u1: require("./img/u1.svg"),
      u2: require("./img/u2.svg"),
      u3: require("./img/u3.svg"),
      u4: require("./img/u4.svg"),
      u5: require("./img/u5.svg"),
      u6: require("./img/u6.svg"),
      totalUsers: 0,
      onlineUsers: 0
    }
  },
  mounted() {
    this.updateUserStats();
    // 定时更新数据
    this.timer = setInterval(() => {
      this.updateUserStats();
    }, 5000); // 每5秒更新一次
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    updateUserStats() {
      const txt = JSON.parse(sessionStorage.getItem('tempGpsData'));

      if (txt) {
        // 计算总数
        groupsPersons().then(res => {
          if (res.data ) {
            // 筛选出groupType不为group，为person的数量
            this.totalUsers = res.data.filter(item => item.grouptype === 'person').length;
          } else {
            this.totalUsers = 0;
          }
        });

        // 计算在线人数
        this.onlineUsers = Object.values(txt).filter(user => {
          // 根据user对象中的状态字段判断是否在线
          // 这里假设user.online或者user.status表示在线状态
          return user.status === '开机' || user.online === true;
        }).length;
      } else {
        this.totalUsers = 0;
        this.onlineUsers = 0;
      }
    }
  }
}

</script>
<style scoped lang="scss">
.tips {
  position: absolute;
  background-color: #ffffff;
  z-index: 999;
  pointer-events: all;
  border-radius: 4px;
  color: #444444;
}

.toptip {

  right: 10px;
  top: 69px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 5px;


  .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 20px;

    i {
      background-color: #00afff;
      border-radius: 50%;
      color: #ffffff;
      padding: 3px;
      margin-right: 10px;
    }

    span:nth-child(3) {
      font-weight: bold;
    }
  }


}

.bottomtip {
  //left: 10px;
  //bottom: 25px;
  display: flex;
  flex-direction: row;
  padding: 10px;

  .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 20px;
    cursor: pointer;
  }
}

.rightbtm {
  right: 50px;
  bottom: 10px;
  display: flex;
  flex-direction: row;
  padding: 10px;
  align-items: center;

  .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 20px;
    cursor: pointer;
  }
}
</style>
